<template>
  <div class="pay-container">
    <!-- 生成微信支付二维码 -->
    <div class="erwei">
      <img :src="payUrl" alt="" />
    </div>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-wechat_pay"></use>
    </svg>
    <span>使用微信进行支付</span>
    <el-descriptions title="订单详情">
      <el-descriptions-item label="订单号"></el-descriptions-item>
      <el-descriptions-item label="创建时间"></el-descriptions-item>
      <el-descriptions-item label="产品名称"></el-descriptions-item>
      <el-descriptions-item label="商品描述"></el-descriptions-item>
      <el-descriptions-item label="购买数量"></el-descriptions-item>
      <el-descriptions-item label="购买用户"></el-descriptions-item>
      <el-descriptions-item label="手机号"></el-descriptions-item>
      <el-descriptions-item label="总价格"> </el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script>
//首先要获取订单id
import { mapState } from "vuex";
//引入生成二维码插件
import qrCode from "qrcode";
//引入获取订单和支付的方法
import * as api from "@/api/transaction";
export default {
  data() {
    return {
      order_id: "", //订单号
      //请求的订单详情
      orderDetail: {
        //数据初始化
        orderDetail: [
          {
            productName: "",
            description: "",
            quantity: "",
          },
        ],
      },
      payUrlRes: {}, //请求获取的支付结果
      payUrl: "", //支付地址
    };
  },
  computed: {},
  created() {
    let { order_id } = this.$route.query;
    this.order_id = order_id;
    //3.如果用户刷新了当前页面,本次交易取消,我们需要让用户重新提交交易
    if (!this.order_id) {
      //没有订单id 有可能用户刷新了页面
      //提示:本次交易取消,返回到预支付页面
      this.$alert("本次交易取消,请重新提交", "提示", {
        confirmButtonText: "确定",
        callback: (action) => {
          this.$router.push({ path: "/preorder" });
        },
      });

      return;
    }
    //1.根据订单id 请求订单详情
    //2.根据订单id 获取微信支付地址,=>我们获取地址之后,生成二维码

    //并发请求 一次发送多个请求 Promise.all([promise1,promise2])

    Promise.all([
      api.getOrderDetail(this.order_id),
      api.pay(this.order_id),
    ]).then((res) => {
      console.log(res);
      this.orderDetail = res[0].data.data;
      let paymentRes = res[1].data;
      if (paymentRes.state) {
        //获取支付地址
        let payUrl = paymentRes.code_url;

        //生成二维码

        qrCode.toDataURL(payUrl, (err, img) => {
          console.log(img);
          this.payUrl = img;
        });
      }
    });

    //轮询 查询支付状态
    //轮询的时候,一定要设置时间
    //设置200ms

    this.queryPayStatusInterval = setInterval(() => {
      api.queryPayStatus(this.order_id).then((res) => {
        console.log(res);
        if (res.data.state) {
          //跳转到支付成功这个页面
          this.$router.push({ path: "/payment/paysuccess" });
        }
        // else {
        // 	this.$router.push({ path: "/vipmanager/charge" })
        // }
      });
    }, 2000);
  },
  beforeDestroy() {
    //组件即将销毁的时候
    //清除定时器
    clearInterval(this.queryPayStatusInterval);
  },
};
</script>